<template>
	<view class="font-13" style="width: 100%;">
		<view @click="jumpToDetail">
			<view class="flex align-center just-between">
				<view class="flex">
					<view class="chnltype" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }">
						{{ chnlType }}
					</view>
					<view v-if="!!scope.thirdOrderIndex"
						style="margin-left: 12rpx;font-size: 42rpx;font-weight: bold;color: #ff0000;">
						#{{ scope.thirdOrderIndex }}
					</view>
				</view>
				<view style="color:#FF953B;font-weight: bold;" v-if="scope.afsOrderStatus != '12'">{{ afsOrderStatus }}
				</view>
				<view style="color:#FF953B;font-weight: bold;" @click.stop="openDeliveryPopup"
					v-if="deliveryStatus && scope.afsOrderStatus == '12'" class="flex align-center">
					<view>{{ deliveryStatus }}</view>
					<eui-uicons type="right" size="30" style="color:#FF953B!important;margin-top: 5rpx;"></eui-uicons>
				</view>
			</view>
			<view
				style="border-bottom: 1rpx solid #E1E1E1;padding-bottom: 8px;margin-top: 12rpx;flex: 1;flex-wrap: wrap;"
				class="flex just-between">
				<view style="margin-left: 6rpx;font-size: 28rpx;flex-wrap: nowrap;" class="flex align-center">
					<text>发起时间</text><text
						style="color:#E43E00;font-weight: bold;margin-left: 9rpx;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; line-clamp: 1; box-orient: vertical;">{{
						scope.sponsorTime
						}}</text>
				</view>
				<view
					style="font-size: 32rpx;margin-left: 12rpx;text-align: right;flex: 1 1 auto;"
					v-if="(scope.afsOrderStatus == '10' || scope.afsOrderStatus == '17') && formatWaitTime">已等待<text
						style="color:#E43E00;font-weight: bold;margin-left: 9rpx;">{{ formatWaitTime }}</text>
				</view>
			</view>
			<view v-if="scope.shipperPhone" class="flex just-between align-center"
				style="padding: 20rpx 30rpx 20rpx 0;border-bottom: 1rpx dashed #E1E1E1;">
				<view>
					<view class="flex align-center" style="height: 50rpx;">
						<text style="font-size: 32rpx;font-weight: bold;">骑手 {{ scope.shipperName || '匿名' }}</text>
					</view>
				</view>
				<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;"
					class="flex align-center just-center" @click.stop="showShipPhonePop" v-if="scope.shipperPhone">
					<image :src="_img_tel" style="height: 42rpx;width: 42rpx;"></image>
				</view>
			</view>
		</view>
		<view class="flex just-between align-center" style="padding: 12rpx 30rpx 12rpx 0;">
			<view class="">
				<view class="flex align-center" style="height: 50rpx;">
					<text style="font-size: 32rpx;font-weight: bold;">{{ scope.contactName || '顾客xxx' }}</text><text
						style="margin-left: 9rpx;font-size: 32rpx;font-weight: bold;"
						v-if="scope.consigneePhoneLast">({{ scope.consigneePhoneLast }})</text>
				</view>
				<view class="flex align-center" style="font-size: 32rpx;color: #4C4C4C;">
					<text style="margin-right: 26rpx;" @click.stop="showContactPop">取件地址></text>
				</view>
				<view style="font-size: 32rpx;"
					v-if="formatTimeRangeText(scope.expectPickUpStartTime, scope.expectPickUpEndTime) != '-'">
					<text style="color: #4C4C4C;">取件时间：<text
							v-if="!!scope.expectPickUpStartTime && !!scope.expectPickUpEndTime">{{
							formatTimeRangeText(scope.expectPickUpStartTime, scope.expectPickUpEndTime) }}</text>
						<text v-else>
							<text>{{ formatTimeRangeValue() }}</text>
						</text>
					</text>
				</view>
			</view>
			<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;"
				class="flex align-center just-center" @click.stop="showContactPop">
				<image :src="_img_tel" style="height: 42rpx;width: 42rpx;"></image>
			</view>
		</view>
		<view
			style="color:#FF3939;margin-bottom: 8rpx;background: #FEF4E5;border-radius: 0px 0px 11rpx 11rpx;line-height: 35rpx;padding: 11rpx 7rpx 10rpx 7rpx;"
			class="ht-35">
			<view class="icon-tag co-00" style="width: 110rpx;display: inline-block;text-align: center;">{{ dealType }}
			</view>
			<view class="co-00" style="margin-left: 10rpx;width: 100rpx;display: inline-block;">原因：</view>{{
			scope.afsReason || '-' }}
		</view>
		<view class="flex" style="align-items:self-start;font-size: 25rpx;margin-bottom: 10rpx;"
			v-if="formatImgList.length > 0">
			<view class="co-00">图片：</view>
			<image-list :list="formatImgList"></image-list>
		</view>
		<view class="flex">
			<view class="flex just-between align-center" style="flex: 1;">
				<view class="" style="font-weight: bold;font-size: 32rpx;margin-left: 12rpx;">
					共{{ scope.afsOrderGoodsNum }}件 申请退款<text class="co-red">{{ formatPrice(scope.applyRefundAmount)
						}}</text>
				</view>
				<view class="flex just-between">
					<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;"
						class="flex align-center just-center" @click.stop="showImage = !showImage" v-if="!showImage">
						<image :src="_img_list" style="height: 35rpx;width: 35rpx;"></image>
					</view>
					<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;"
						class="flex align-center just-center" @click.stop="showImage = !showImage" v-else>
						<image :src="_img_list_show" style="height: 35rpx;width: 35rpx;"></image>
					</view>
					<view class="flex align-center just-right"
						style="color:#4C4C4C;font-size: 32rpx;margin-left: 30rpx;" @click.stop="setAfsOrderGoodsOpen">
						<view>退款详情</view>
						<eui-uicons :type="afsOrderGoodsOpen ? 'up' : 'down'" size="30"
							style="color: #4C4C4C !important;margin-top: 6rpx;"></eui-uicons>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 8rpx;" v-if="afsOrderGoodsOpen">
			<GoodsList :goods-list="scope.bcmAfsOrderGoodsList" type="afs" :showImage="showImage" />
			<AfsOrderState :scope="scope" :a="scope" />
		</view>
		<view class="flex just-between align-center"
			style="border-top: 1rpx dashed #E1E1E1;margin-top: 14rpx;line-height: 35px;padding-top: 15rpx;padding-right: 15rpx;"
			v-if="afsOrderGoodsOpen">
			<view style="font-size: 25rpx;flex: 1;">
				<view class="flex align-center" style="line-height: 29rpx;font-size: 25rpx;margin-bottom: 8rpx;">
					<view style="margin-right: 26rpx;">原订单号:{{ scope.thirdOrderNo }}</view>
					<CopyItem :data="scope.thirdOrderNo">
						<template v-slot:default>
							<view class="icon-tag">复制单号</view>
						</template>
					</CopyItem>
				</view>
				<view class="flex align-center" style="line-height: 29rpx;font-size: 25rpx;margin-bottom: 8rpx;">
					<view style="margin-right: 26rpx;">售后单号:{{ scope.thirdAfsOrderNo }}</view>
					<CopyItem :data="scope.thirdAfsOrderNo">
						<template v-slot:default>
							<view class="icon-tag">复制单号</view>
						</template>
					</CopyItem>
				</view>
				<view class="flex" style="line-height: 29rpx;margin-bottom: 8rpx;" v-if="scope.auditTime">
					<view style="margin-right: 8rpx;">审核时间：</view>
					<view>{{ scope.auditTime }}</view>
				</view>
				<view class="flex" style="line-height: 29rpx;margin-bottom: 8rpx;" v-if="scope.finishedTime">
					<view style="margin-right: 8rpx;">完成时间：</view>
					<view>{{ scope.finishedTime }}</view>
				</view>
			</view>
			<view class="flex align-center">
				<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;margin-left: 30rpx;"
					class="flex align-center just-center" @click.stop="setPrint">
					<image :src="_img_printer" style="height: 35rpx;width: 35rpx;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getBcmDictItem, getBcmDictName, formatPrice } from '../../../../hooks/bcmUseUntils';
import { greaterThanCurTime, isToday, getDiffTime, formatTimeRangeText } from '../../../../hooks/useDatetimeUtil'
import service from '@/common/service';
import { getBcmUrl, bcmRequest } from '../../../../hooks/bcmServices';
import { computed, defineProps } from 'vue';
import _img_tel from '../../../../static/img/bcmIcons/tel.png'
import _img_list from '../../../../static/img/bcmIcons/list.png'
import _img_list_show from '../../../../static/img/bcmIcons/list_show.png'
import _img_printer from '../../../../static/img/bcmIcons/printer.png'
import BcmCloseBtn from '../../components/BcmCloseBtn.vue'
import GoodsList from '../../components/GoodsList.vue'
import AfsOrderState from './AfsOrderState.vue'
import CopyItem from '../../components/CopyItem.vue'
import ImageList from '../../components/ImageList.vue'

const emit = defineEmits(['print', 'update:modelValue', 'update:showPop', 'update:showContactPop', 'update:showContactPop', 'update:showDeliveryPop', 'update:deliverList', 'update:logisticsCode', 'update:showShipPhonePop']);

const props = defineProps<{
	scope?: any;
	chnlTypeList?: any[];
	logisticsCodeList?: any[];
	deliveryStatusList?: any[];
	returnGoodsTypeList?: any[];
	afsOrderStatusList?: any[];
	dealTypeList?: any[];
	orderAction?: () => void;
	currentTime?: Number;
	showPop?: Boolean;
	showContactPop?: Boolean;
	showShipPhonePop?: Boolean;
	orderItem?: any;
	deliverList?: any[];
	logisticsCode?: string;
	showConfigModal?:boolean;
}>()

const showConfigModal = ref(false);
const bcmUrl = getBcmUrl();
const showImage = ref(false);
const afsOrderGoodsOpen = ref(false);

watch(() => props.showConfigModal, (newVal) => {
	if (newVal) {
		showConfigModal.value = props.showConfigModal;
	}
}, { immediate: true });

const showContact = () => {
	emit('update:modelValue', props.scope)
	emit('update:showContactPop', true)
}

const showPop = () => {
	emit('update:modelValue', props.scope)
	emit('update:showPop', true)
}

const showShipPhonePop = () => {
	emit('update:modelValue', props.scope)
	emit('update:showShipPhonePop', true)
}

const openDeliveryPopup = async () => {
	await fetchOrderDeliveryList();
	emit('update:modelValue', props.scope)
	emit('update:logisticsCode', logisticsCode)
	emit('update:showDeliveryPop', true)
}

const jumpToDetail = () => {
	uni.navigateTo({
		url: './afsdetail?c_id=' + props.scope.afsOrderId + '&showModal=' + showConfigModal.value
	});
}

const formatTimeRangeValue = () => {
	if (!!props.scope.expectPickUpStartTime) {
		return `${props.scope.expectPickUpStartTime}-`
	} else if (!!props.scope.expectPickUpEndTime) {
		return `-${props.scope.expectPickUpEndTime}`
	} else {
		return '-'
	}
}

const setAfsOrderGoodsOpen = () => {
	afsOrderGoodsOpen.value = !afsOrderGoodsOpen.value
}

const fetchOrderDeliveryList = async () => {
	service.enjoyShowLoading('正在加载...');
	const req = {
		IsNotPage: true,
		WhereList: [{
			c_col: "thirdAfsOrderNo",
			c_oper: "等于",
			c_value: props.scope.thirdAfsOrderNo,
			c_logic: "而且"
		}]
	};
	const result: any = await bcmRequest(bcmUrl.orderApi, '售后单配送日志表', 'EnjoyQueryList', req);
	service.enjoyHideLoading();
	let list = result.ReturnObject.sort((a, b) => new Date(b?.operateTime?.replace(/-/g, "/")).getTime() - new Date(a
		.operateTime.replace(/-/g, "/")).getTime()).map((v: any) => {
			v.title = v.deliveryDesc;
			v.desc = v.operateBy ? '操作人: ' + v.operateBy + "    " + isToday(v.operateTime) : isToday(v.operateTime);
			return v
		}) || [];

	emit('update:deliverList', list)
}

const chnlType = computed(() => {
	return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.text || props.scope.chnlType
})
const color = computed(() => {
	return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.color || '#000'
})

const afsOrderStatus = computed(() => {
	return props.afsOrderStatusList?.find(v => v.value == props.scope.afsOrderStatus)?.text || props.scope.afsOrderStatus
})

const deliveryStatus = computed(() => {
	return props.deliveryStatusList?.find(v => v.value == props.scope.deliveryStatus)?.text || props.scope.deliveryStatus
})

const dealType = computed(() => {
	return props.dealTypeList?.find(v => v.value == props.scope.dealType)?.text || props.scope.dealType
})

const returnGoodsType = computed(() => {
	return props.returnGoodsTypeList?.find(v => v.value == props.scope.returnGoodsType)?.text || props.scope.returnGoodsType
})

const logisticsCode = computed(() => {
	return props.logisticsCodeList?.find(v => v.value == props.scope.logisticsCode)?.text || props.scope.logisticsCode
})

const formatImgList = computed(() => {
	let afsPicJson = JSON.parse(!!props.scope.afsPic && props.scope.afsPic, undefined);
	return afsPicJson;
})

const formatWaitTime = computed(() => {
	return getDiffTime(new Date(props.scope.sponsorTime.replace(/-/g, "/")))
})

const setPrint = () => {
	emit('print', props.scope);
}


</script>
<style lang="scss" scoped>
@import "../../common/common.css";

.popup-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background-color: #fff;

	.popup-title {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		padding-right: 36rpx;
		padding-left: 30rpx;
		font-size: 33rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}
}

.bottom-1 {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	height: 70rpx;
	// padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
	// background: $uni-bg-color;
	border-top: 1rpx solid #979797;
}
</style>